<template xmlns="http://www.w3.org/1999/html">
  <el-row :gutter="16" style="margin-top: 10px">
    <el-col v-bind="grid" class="ivu-mb" v-for="(item, index) in infoList" :key="index">
      <el-card shadow="never" :padding="0">
        <p slot="header">
          <span v-text="item.title"></span>
          <el-tag style="float: right" type="success">{{ item.date }}</el-tag>
        </p>
        <div>
          <div class="number">{{ item.today }}</div>
          <div class="ivu-pt-8" style="height: 42px">
            <span>昨日 {{ item.yesterday }}</span>
            <span class="ivu-mr">
              日环比 {{ Number(item.todayRatio) }}%
              <i
                class="iconColor"
                :class="[
                  Number(item.todayRtio) >= 0 ? ' ' : 'on',
                  Number(item.todayRatio) >= 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom\n',
                ]"
              />
            </span>
          </div>
          <el-divider />
          <div class="total">
            <el-row>
              <el-col :span="12">{{ item.totalName }}</el-col>
              <el-col :span="12" class="ivu-text-right">
                <el-statistic :value="item.outputValue" />
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import {getItemOutputValue, getTeacherBaseInfo, getUserBaseInfo, indexBaseInfo} from "@/pages/index";
import {useUserStore} from "@/pinia/stores/user.ts";
const userData = useUserStore().userInfo;
const grid = reactive({
  xl: 12,
  lg: 12,
  md: 12,
  sm: 12,
  xs: 24,
})
const infoList = ref([])
const getBaseInfo = async () => {
  const res = await await getTeacherBaseInfo(userData.id);
  infoList.value = res.data.map(item => ({
    ...item,
    outputValue: getItemOutputValue(item.total)
  }))
}
onMounted(() => {
  getBaseInfo()
})

</script>
<style lang="scss" scoped>
.ivu-mb{
  margin-bottom: 14px;
}
.number {
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 400;
  color: #333333;
  line-height: 40px;
}

.iconColor {
  color: #F53F3F;
}

.iconColor.on {
  color: #0FC6C2;
}

.ivu-mr {
  display: inline-block;
  margin-left: 16px !important;
}

.ivu-text-right {
  text-align: right;
}
::v-deep.el-card__header {
  border-bottom: none !important;
  padding-bottom: 0;
}
.el-divider--horizontal {
  margin: 0 0 12px 0;
}
.total {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
}


</style>

